<template>
    <a-carousel v-model:current="current"
                :auto-play="hoverPlay"
                @change="onChange"
                :move-speed="speed"
                indicatorType="never"
                class="swiper-box"
                transition-timing-function="cubic-bezier(0.34, 0.69, 1)"
                arrow-class="arrow">
        <a-carousel-item v-for="(item, index) in data" :key="index+1" class="swiper-item" @click.self="onClose">
            <!-- <div class="logo"></div> -->
            <div class="content-box">
                <div class="content-left" @click.stop="onClose">
                    <div class="top-label">{{ item.title }}</div>
                    <div class="bottom-login" @click.stop="Login">
                        <span class="text1">立即</span>
                        <span class="text2">登录</span>
                    </div>
                </div>
                <div class="content-right" @click.stop="onClose">
                    <img :src="item.url" alt="" class="image">
                </div>
                <div class="login_form" v-show="visibleLogin">
                    <a-form ref="formRef" :rules="rules" :model="form" class="form" auto-label-width @submit="handleSubmit">
                        <a-form-item field="LoginName" tooltip="请输入用户名" label="用户名">
                            <a-input v-model="form.LoginName" placeholder="请输入用户名"/>
                        </a-form-item>
                        <a-form-item field="Password" label="密码">
                            <a-input v-model="form.Password" placeholder="密码" />
                        </a-form-item>
                        <a-form-item field="ValidCode" label="验证码">
                            <a-input v-model="form.ValidCode" placeholder="验证码">
                                <template #append>
                                    <img :src="pageData.verifyCode" alt="" style="cursor: pointer" class="code" @click="getValidateCode"/>
                                </template>
                            </a-input>
                        </a-form-item>
                        <a-form-item>
                            <a-button html-type="submit" class="sub-button" status="success">登录</a-button>
                        </a-form-item>
                    </a-form>
                </div>
            </div>
        </a-carousel-item>
    </a-carousel>
</template>

<script setup>
    import { useSetState } from 'vue-hooks-plus';
    import moment from 'moment';
    import { v4 as uuid } from 'uuid';
    import server from "@hook/httpServer/httpServer";
    import { useUserInfoStore } from '@hook/store';
    // 获取定制的 store 实例
    const store = useUserInfoStore()
    const props = defineProps({
         // 是否需要表头
         data: {
            type: Array,
            default: () => []
        },
        speed: {
            type: Number,
            default: () => 3000
        }
    });
    const emits = defineEmits(["setloading"])
    const visibleLogin = ref(false);
    const playconfig = { interval: 10000, hoverToPause: false };
    const hoverPlay = ref(playconfig);
    const Login = ()=> {
        visibleLogin.value = !visibleLogin.value;
        hoverPlay.value = visibleLogin.value?false:playconfig;
    };
    const onClose = ()=> {
        visibleLogin.value = false;
        hoverPlay.value = playconfig;
    }
    const current = ref(1);
    const onChange = (index)=> {
        current.value = index;
        onClose();
    };

    // 表单数据
    const form = reactive({
        LoginName: 'kyqq_admin',
        Password: 'Kyqq@12*45',
        ValidCode: '',
        UseCode:false
    })
    const rules = {
        LoginName: [
            { required: true, message:'请输入账号！' }
        ],
        Password: [
            { required: true, message:'请输入密码！' }
        ]
    }
    // 设定 pageData 缓存组件内全部响应式变量
    const [ pageData ,  setPageData] = useSetState({
        verifyCode:''
    })

    // 获取验证码
    const getValidateCode=()=>{
        const params = {
            t: moment().valueOf(),  // 生成时间戳
            ValidSerialNumber: uuid() // 生成随机字符串uuid
        }
        const baseUrl = window.location.origin+'/'+server.common.ValidateCode
        const url= baseUrl +`?t=${params.t}&ValidSerialNumber=${params.ValidSerialNumber}`;
        setData({verifyCode:url})
    }
    // 组件内值修改
    const setData=(data)=>{
        setPageData({...pageData.value, ...data})
    }
    // 发起提交 ， 注册完用户数据之后进行页面跳转
    const handleSubmit = ({values, errors}) => {
        emits('setloading' , true )
        store.setUserInfo(form).then(res=>{
            emits('setloading' , false )
            if(res){
                $router.push(res)
            }
        })


    }
    onMounted(()=>{
        getValidateCode()
    })

</script>

<style lang="less" scoped>
    :deep(.arco-carousel-arrow-left) {
        width: 0.4rem;
        height: 0.4rem;
    }
    :deep(.arco-carousel-arrow > div > svg){
        font-size: 0.24rem;
    }
    :deep(.arco-carousel-arrow-right) {
        width: 0.4rem;
        height: 0.4rem;
    }

    .swiper-box{
        width: 100%;
        height: 50%;
        user-select: none;
        .swiper-item{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;

            .content-box{
                width: 100%;
                height: 60%;
                position: relative;
                display: flex;
                justify-content: space-evenly;
                align-items: center;
                .content-left{
                    flex: 0.5;
                    height: 50%;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    padding-left: 10%;
                    .top-label {
                       font-size: 0.3rem;
                       color: #fff;
                       font-weight: bold;
                    }
                    .bottom-login {
                        width: 1.5rem;
                        height: 0.45rem;
                        border: 1px solid #fff;
                        border-radius: 5%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 0.15rem;
                        cursor: pointer;
                        letter-spacing: 0.05rem;
                        .text1{
                            color: #fff;
                        }
                        .text2{
                            color: #009EFE;
                        }
                        &:hover{
                            transform: scale(1.1);
                        }
                    }
                }
                .content-right{
                    flex: 0.5;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    .image{
                        width: 80%;
                        height: 80%;
                    }
                }
                .login_form{
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    z-index: 99;
                    .form{
                        width: 3rem;
                        .sub-button{
                            width: 100%;
                            background: #0b77e1;
                            color: #fff;
                        }
                    }
                }
            }
        }
    }
</style>